'use client';

import DefaultImage from '@/asset/default-image.png';
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer';
import type { ShopWithProduct } from '@/service/type/shop';
import QueryImage from '../common/query-image';
import { Button } from '../ui/button';
import CreateOrder from './create-order';

export default function UserCart({
  cart,
  currentShop,
}: { cart: Record<string, number>; currentShop: ShopWithProduct }) {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button>查看购物车</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="max-w-[500px] mx-auto w-full">
          <DrawerHeader>
            <DrawerTitle>购物车</DrawerTitle>
          </DrawerHeader>
          <div className="py-5 space-y-5 max-h-[400px] overflow-y-auto scrollbar-thin">
            {Object.keys(cart).length === 0 && (
              <div className="text-center">购物车空空如也</div>
            )}
            {Object.entries(cart).map(([id, count]) => {
              const product = currentShop.products.find(
                (p) => p.id === Number(id),
              );
              if (!product) return null;
              return (
                <div key={id} className="flex justify-between items-center">
                  <div className="flex items-end gap-4">
                    <QueryImage
                      imageKey={product.imageKeys[0] ?? undefined}
                      defaultImage={DefaultImage}
                      wrapperClassName="rounded-lg w-32 h-16 shrink-0"
                      imgClassName="rounded-lg w-full h-full object-cover"
                    />
                    <span>x {count}</span>
                  </div>

                  <div className="space-y-1">
                    <div>{product.name}</div>
                    <div className="text-end">
                      ￥{count * Number(product.price)}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="text-xl font-bold">
            总价：
            {Math.round(
              Object.entries(cart).reduce((total, [id, count]) => {
                const product = currentShop.products.find(
                  (p) => p.id === Number(id),
                );
                if (!product) return total;
                return total + count * Number(product.price);
              }, 0) * 100,
            ) / 100}
            元
          </div>
          <DrawerFooter>
            <div className="flex justify-end gap-5 ">
              <DrawerClose asChild>
                <Button variant="outline">关闭</Button>
              </DrawerClose>
              <CreateOrder
                cart={cart}
                shopId={currentShop.id}
                disabled={Object.keys(cart).length === 0}
              />
            </div>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}
